<template>
	<view class="login-page">
		<!-- 顶部进度指示器 -->
		<view class="progress-bar">

		</view>

		<!-- 步骤1：微信授权 -->
		<view v-show="stepNum==1" ref="step1" class="step-container">
			<view class="card">
				<view class="text-center mb-30">
					<view class="shield-icon">
						<u-icon name="account" color="#07c160" size="40"></u-icon>
					</view>
					<text class="title">安全登录</text>
					<text class="subtitle">通过双因子认证保护您的账号安全</text>
				</view>

				<view class="space-y-20">
					<view class="text-center">
						<text class="desc">请先完成微信授权，验证您的身份</text>
						<view v-show="userInfo.userView" ref="wechatUser" class="wechat-user">
							<view class="flex items-center justify-center space-x-10">
								<image ref="avatar" :src="userInfo.avatarUrl" mode="aspectFill" class="user-avatar">
								</image>
								<view class="text-left">
									<text ref="wechatNickname" class="font-medium">{{ userInfo.nickName }}</text>
								</view>
							</view>
						</view>
						<u-button ref="wechatAuthBtn" type="primary" class="wechat-auth-btn" open-type="getPhoneNumber"
							@getphonenumber="wechatAuth">
							<u-icon name="weixin-fill" class="mr-2" size="30" color="#fff"></u-icon>{{wechatText}}
						</u-button>
					</view>

					<view class="text-center text-xs text-gray-400 flex items-center justify-center">
						<radio style="transform: scale(0.7);" @click="radioClick"/>
						<text>您已阅读并同意</text>
						<text class="link" @click="navigateToAgreement">《用户注册协议》</text>
						<!-- <text>和</text>
						  <text class="link" @click="navigateToPrivacy">《隐私政策》</text> -->
					</view>
				</view>
			</view>

			<view class="tips-card">
				<view class="flex items-start">
					<u-icon name="info-circle" color="#1677ff" class="mr-2 mt-1"></u-icon>
					<view>
						<text class="tips-title">账号验证流程</text>
						<text class="tips-content">
							1. 微信授权验证您的身份<br />
							2. 如未注册将引导您完成注册<br />
							3. 账号密码验证完成登录
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 步骤2：账号注册 -->
		<view v-show="stepNum==2" ref="step2Register" class="step-container">
			<view class="card">
				<view class="text-center mb-30">
					<text class="title">完善账号信息</text>
					<!-- <text class="subtitle">检测到您尚未注册，请完成账号注册</text> -->
				</view>

				<view class="space-y-20">
					<!-- 使用 u-form 组件包裹所有输入项 -->
					<u-form :model="formData" :rules="rules" ref="uForm" labelWidth="80" labelAlign="right"
						:borderBottom="true">

						<!-- 姓名输入框 -->
						<u-form-item label="姓名" prop="userName">
							<u-input v-model="formData.userName" placeholder="姓名"></u-input>
						</u-form-item>

						<!-- 身份证号输入框 -->
						<u-form-item label="身份证号" prop="identityCardNo">
							<u-input v-model="formData.identityCardNo" type="idcard" placeholder="身份证号"></u-input>
						</u-form-item>

						<!-- 手机号输入框 -->
						<u-form-item label="手机号" prop="telephone">
							<u-input v-model="formData.telephone" :disabled="true" placeholder="请输入手机号"></u-input>
						</u-form-item>

						<!-- 验证码输入框和按钮 -->
						<u-form-item label="验证码" prop="randNum">
							<u-input v-model="formData.randNum" placeholder="请输入验证码">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getPicFun" :text="tips" type="success" size="mini"></u-button>
								</template>
							</u-input>
						</u-form-item>

						<!-- 密码输入框 -->
						<u-form-item label="密码" prop="userPwd">
							<u-input v-model="formData.userPwd" type="password" placeholder="请设置密码"
								password-icon></u-input>
						</u-form-item>

						<!-- 确认密码输入框 -->
						<u-form-item label="确认密码" prop="confirmPwd">
							<u-input v-model="formData.confirmPwd" type="password" placeholder="请确认密码"
								password-icon></u-input>
						</u-form-item>

						<!-- 提交按钮 -->
						<u-form-item>
							<u-button ref="registerBtn" type="primary" class="action-btn"
								@click="submitForm">完成</u-button>
						</u-form-item>

						<!-- 跳过按钮 -->
						<u-form-item>
							<u-button ref="skipToHomeBtn" type="default" class="action-btn" @click="skipToHome">
								跳过<u-icon name="arrow-right" class="mr-2"></u-icon>
							</u-button>
						</u-form-item>

					</u-form>
				</view>
			</view>
		</view>

		<!-- 步骤3：密码登录 -->
		<view v-show="stepNum==3" ref="step3Login" class="step-container">
			<view class="card">
				<view class="text-center mb-30">
					<text class="title">完成账号验证</text>
					<text class="subtitle">请输入账号和密码完成登录</text>
				</view>

				<view class="space-y-20">
					<u-form :model="loginData" :rules="loginRules" ref="loginForm" labelWidth="80" labelAlign="right"
						:borderBottom="true">
						<u-form-item label="账号" prop="account">
							<u-input placeholder="请输入手机号/身份证号" v-model="loginData.account" class="input-item"
								prefix-icon="account"></u-input>
						</u-form-item>
						<u-form-item label="密码" prop="pwd">
							<u-input type="password" placeholder="请输入密码" v-model="loginData.pwd" class="input-item"
								prefix-icon="lock" password-icon></u-input>
						</u-form-item>
						<text class="link" style="font-size: 12px;" @click="forgetPassword">忘记密码</text>
						<u-form-item>
							<u-button ref="loginBtn" type="primary" class="action-btn" @click="login">完成登录</u-button>
						</u-form-item>
						<u-form-item>
							<u-button ref="backToRegisterBtn" type="default" class="action-btn" @click="backToRegister">
								<u-icon name="arrow-left" class="mr-2"></u-icon>返回上一步
							</u-button>
						</u-form-item>
					</u-form>

				</view>
			</view>
		</view>

		<!-- <view class="text-center text-sm text-gray-500 mt-20">
			<text>遇到问题？</text>
			<text class="text-primary" @click="contactService">联系客服</text>
		</view> -->

		<!-- 成功提示弹窗（使用uView的modal） -->
		<u-modal ref="successModal" title="提示" :show="showSuccessModal" :mask-close-able="false"
			:close-on-click-modal="false">
			<view class="success-modal-content">
				<view class="success-icon">
					<u-icon name="checkmark-circle" color="#07c160" size="60"></u-icon>
				</view>
				<text class="success-title">{{ successTitle }}</text>
				<text class="success-desc">{{ successDesc }}</text>
			</view>
		</u-modal>
		<slider-captcha v-show="isSliderShow" :frontimg="picObj.slidingImage" :backimg="picObj.backImage"
			:yHeight="picObj.yHeight" :maskclose="true" :randNum="telRandom" @onRefresh="getPicFun" @onSuccess="getCode"
			@onClose="handClose" @onMoveEnd="handleSliderMoveEnd" />
	</view>
</template>

<script>
	import {
		postAutologin,
		activateAccount,
		loginAccountAndPwd
	} from '@/api/loginApi.js'
	import {
		getPic,
		checkcapcode,
		postSend
	} from '@/api/api.js'
	import SliderCaptcha from '@/pages/compoents/slideVue.vue';
	import w_md5 from "@/js_sdk/zww-md5/w_md5.js"
	export default {
		components: {
			SliderCaptcha
		},
		data() {
			return {
				agreementRadio: false, //勾选状态
				isSliderShow: false,
				picObj: {
					slidingImage: '',
					backImage: '',
					capcode: '',
					yHeight: 0
				},
				tips: '',
				stepNum: 1,
				showSuccessModal: false,
				successTitle: "",
				successDesc: "",
				wechatUserInfo: null,
				wechatText: '微信快捷授权',
				userInfo: {
					avatarUrl: '',
					nickName: '',
					userView: false
				},
				loginData: {
					account: '',
					pwd: '',
					number: ''
				},
				loginRules: {
					account: [{
						required: true,
						message: '账号不能为空',
						trigger: 'blur'
					}],
					pwd: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]
				},
				telRandom: 0, //请求验证码的随机码
				formData: {
					userName: '',
					identityCardNo: '',
					telephone: '',
					randNum: '',
					userPwd: '',
					confirmPwd: ''
				},
				// 校验规则
				rules: {
					userName: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}],
					identityCardNo: [{
							required: true,
							message: '身份证号不能为空',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								// 18位身份证正则（基本格式）
								const idCardReg =
									/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;

								if (!value) {
									return callback(new Error('请输入身份证号'));
								}

								// 基本格式校验
								if (!idCardReg.test(value)) {
									return callback(new Error('请输入正确的身份证号格式'));
								}

								// 校验码验证（根据GB 11643-1999标准）
								const code = '10X98765432'; // 校验码对应值
								const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 加权因子
								let sum = 0;
								const idCardUpper = value.toUpperCase(); // 统一转为大写（处理x/X）

								// 计算前17位与加权因子的乘积和
								for (let i = 0; i < 17; i++) {
									sum += parseInt(idCardUpper[i], 10) * factor[i];
								}

								// 计算校验码
								const checkCode = code[sum % 11];
								if (idCardUpper[17] !== checkCode) {
									return callback(new Error('身份证号校验码错误，请检查'));
								}

								// 验证通过
								callback();
							},
							trigger: 'blur'
						}
					],
					telephone: [{
						required: true,
						message: '手机号不能为空',
						trigger: 'blur'
					}, {
						pattern: /^1[3-9]\d{9}$/, // 11位数字，第一位为1，第二位为3-9，后9位为任意数字
						message: '请输入正确的手机号格式',
						trigger: ['blur', 'change']
					}],
					randNum: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],
					userPwd: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					},{
  pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/,
  message: '密码必须包含字母和数字，且长度在8-20个字符之间',
  trigger: 'blur'
}],
					confirmPwd: [{
							required: true,
							message: '确认密码不能为空',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value !== this.formData.userPwd) {
									callback(new Error('确认密码与密码不一致'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					]
				}
			};
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.stepNum = option.stepNum
			this.formData.telephone = option.telephone
			if (option.stepNum == 2) {
				uni.setNavigationBarTitle({
					title: '完善信息' // 标题内容
				});
			}
		},
		methods: {
			radioClick() {
				this.agreementRadio=true
			},
			forgetPassword() {
				uni.navigateTo({
					url: `/pages/login/forgotPassword?phone=${this.loginData.account}`
				})
			},
			async getPicFun() {
				if (!this.$refs.uCode.canGetCode) {
					return uni.$u.toast('倒计时结束后再发送');
				}
				try {
					uni.showLoading({
						title: '加载中'
					})
					const res = await getPic(this.formData.telephone)
					console.log('222', res)
					if (res.data.result == 0) {
						this.picObj = {
							...res.data,
							backImage: 'data:image/png;base64,' + res.data.backImage,
							slidingImage: 'data:image/png;base64,' + res.data.slidingImage
						}
						this.telRandom = 0 // 打开前重置
						this.isSliderShow = true
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.$u.toast(res.data.message || '获取验证码失败！');
					}
				} catch (error) {
					uni.hideLoading()
					uni.$u.toast(res.data.message || '获取验证码失败！');
				}
			},
			async handleSliderMoveEnd(moveX) {
				try {
					const res = await checkcapcode({
						xpos: moveX,
						capcode: this.picObj.capcode,
						mobile: this.formData.telephone
					})
					if (res.data.result == 0) {
						this.telRandom = res.data.randNum
					} else {
						this.telRandom = Math.floor(Math.random() * 1000)
						uni.$u.toast(res.data.message || '验证失败！');
					}
				} catch (error) {
					this.telRandom = Math.floor(Math.random() * 1000)
					uni.$u.toast(res.data.message || '验证失败！');
				}
			},
			async getCode() {
				this.isSliderShow = false
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				try {
					const res = await postSend(this.formData.telephone, this.telRandom)
					if (res.data.result == 0) {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.hideLoading();
						uni.$u.toast(res.data.message || '发送短信失败！');
					}
				} catch (error) {
					uni.$u.toast(res.data.message || '发送短信失败！');
				}
			},
			handClose() {
				this.isSliderShow = false
			},
			navigateToAgreement() {
				uni.navigateTo({
					url: '/pages/about/agreement'
				})
			},
			codeChange(text) {
				this.tips = text;
			},


			// 微信真实授权逻辑（核心修改）
			async wechatAuth(e) {
				if (!this.agreementRadio) {
					return this.$u.toast('请阅读并同意用户注册协议');
				}
				const {
					errMsg,
					encryptedData,
					iv
				} = e.detail;
				uni.setStorage({
					key: 'uid',
					data: ''
				})
				uni.setStorage({
					key: 'sid',
					data: ''
				})
				if (errMsg === 'getPhoneNumber:ok') {
					// 授权成功，调用后端接口或云函数解密
					console.log('??', e)
					uni.getUserInfo({
						desc: '用于验证您的身份并完成登录', // 必传，说明授权用途
						success: (res) => {
							uni.showLoading({
								title: '加载中'
							});
							console.log('??2', res)
							// 存储用户信息（头像、昵称等）
							this.wechatUserInfo = res.userInfo;

							uni.login({
								provider: 'weixin', //使用微信登录
								success: async (loginRes) => {
									const params = {
										code: loginRes.code,
										iv: iv,
										encryptedData: encryptedData.replace(/\+/g, '%2B')
									}

									const postRes = await postAutologin(params)
									console.log('post', postRes)
									if (postRes.data.result == 0) {
										this.showWechatUserInfo(); // 显示用户信息到页面
										uni.setStorage({
											key: 'uid',
											data: postRes.header.uid
										})
										uni.setStorage({
											key: 'sid',
											data: postRes.header.sid
										})
										uni.setStorage({
											key: 'account',
											data: postRes.data.account
										})
										uni.setStorage({
											key: 'isIdentification',
											data: postRes.data.isIdentification
										})
										uni.hideLoading()
										if (postRes.data.isIdentification === 0) {
											this.formData.telephone = postRes.data.account
											// this.successTitle = "身份验证成功";
											// this.successDesc = "个人信息不完善,即将跳转信息页";
											// this.showSuccessModal = true;
											// setTimeout(() => {
												// this.showSuccessModal = false;
												this.goToStep2()
											// }, 1000)
										} else {
											this.loginData.number = postRes.data.random //随机码
											console.log('随机码', postRes.data.random)
											this.loginData.account = postRes.data.account
											// this.successTitle = "身份验证成功";
											// this.successDesc = "个人信息已认证,即将跳转登录页";
											// this.showSuccessModal = true;
											// setTimeout(() => {
												// this.showSuccessModal = false;
												this.goToStep3()
											// }, 1000)
										}

									} else {
										uni.hideLoading()
										this.$u.toast(postRes.data.message || '接口错误');
									}
								}
							});

						}
					});
				} else {
					// 授权失败（如用户拒绝）
					console.log('用户拒绝授权');
					this.$u.toast('您取消了授权，请重新授权以继续');
				}
			},
			// 新增：显示微信用户信息到页面
			showWechatUserInfo() {
				if (!this.wechatUserInfo) return;
				// 更新头像和昵称
				this.userInfo.avatarUrl = this.wechatUserInfo.avatarUrl;
				this.userInfo.nickName = this.wechatUserInfo.nickName;
				// 显示用户信息区域
				this.userInfo.userView = true
				// 更新按钮状态为"授权成功"
				this.wechatText = '授权成功'
			},
			// 切换到步骤2（注册）
			goToStep2() {
				// 切换视图
				this.stepNum = 2
				// this.$nextTick(()=>{
				// 	this.$refs.uForm.setRules(this.rules)
				// })

			},

			// 切换到步骤3（登录）
			goToStep3() {
				// 切换视图
				this.stepNum = 3

			},

			// 跳过
			skipToHome() {
				// // 切换视图
				// this.showSuccessModal = true;
				// this.successTitle = "未注册";
				// this.successDesc = "账号未完善，部分功能不可用，即将跳转首页";
				// setTimeout(() => {
					// this.showSuccessModal = false;
					uni.switchTab({
						url: '/pages/home/home',
						fail: (err) => {
							this.$u.toast('跳转失败，请重试');
						}
					});
				// }, 2000)
			},

			// 返回注册步骤
			backToRegister() {
				// 切换视图
				this.wechatText='微信快捷授权'
				this.userInfo.avatarUrl = '';
				this.userInfo.nickName = '';
				this.userInfo.userView = false
				this.stepNum = 1
			},

			// 注册逻辑
			submitForm() {
				this.$refs.uForm.validate().then(async val => {
					// 校验通过后，执行提交操作
					console.log('表单数据:', this.formData);
					uni.showLoading({
						title: '加载中'
					})
					const params = {
						...this.formData,
						userPwd: w_md5.hex_md5_16(this.formData.userPwd),
						confirmPwd: w_md5.hex_md5_16(this.formData.confirmPwd)
					}
					const res = await activateAccount(params)
					console.log('res', res)
					if (res.result == 0) {
						// this.showSuccessModal = true;
						// this.successTitle = "注册成功";
						// this.successDesc = "账号已完善，即将跳转首页";
						uni.hideLoading()
						// setTimeout(() => {
							// this.showSuccessModal = false;
							uni.switchTab({
								url: '/pages/home/home',
								fail: (err) => {
									this.$u.toast('跳转失败，请重试');
								}
							});
						// }, 1500)
					} else {
						uni.hideLoading()
						uni.$u.toast(res.message || '注册失败')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},

			// 登录逻辑
			login() {
				this.$refs.loginForm.validate().then(async val => {
					// 校验通过后，执行提交操作
					// 模拟登录接口请求
					const params = {
						...this.loginData,
						pwd: w_md5.hex_md5_16(this.loginData.pwd)
					}
					const res = await loginAccountAndPwd(params)
					console.log('登录res', res)
					if (res.data.result == 0) {
						uni.setStorage({
							key: 'uid',
							data: res.header.uid
						})
						uni.setStorage({
							key: 'sid',
							data: res.header.sid
						})
						uni.setStorage({
							key: 'userInfo',
							data: res.data
						})
						// this.showSuccessModal = true;
						// this.successTitle = "登录成功";
						// this.successDesc = "双因子认证完成，即将进入首页";
						// setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/home',
								fail: (err) => {
									this.showSuccessModal = false;
									console.error('跳转失败:', err);
									this.$u.toast('跳转失败，请重试');
								}
							});
						// }, 1000);
					} else {
						uni.$u.toast(res.data.message || '登录失败')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败===')
				})
			},

			// 联系客服
			contactService() {
				this.$u.toast('正在打开客服窗口...');
				// 实际项目中可调用客服接口或跳转客服页面
			}
		},
		onUnload() {

		}
	};
</script>

<style scoped>
	/* 基础样式 */
	.login-page {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 进度条样式 */
	.progress-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 500rpx;
		margin: 30rpx auto 50rpx;
		padding: 0 10rpx;
	}

	.progress-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 110rpx;
	}

	.step-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.step-active {
		border: 4rpx solid #07c160;
		background-color: #07c160;
		color: #fff;
	}

	.step-completed {
		border: 4rpx solid #07c160;
		background-color: rgba(7, 193, 96, 0.1);
		color: #07c160;
	}

	.step-pending {
		border: 4rpx solid #dcdcdc;
		background-color: #fff;
		color: #dcdcdc;
	}

	.step-text {
		font-size: 24rpx;
		font-weight: 500;
	}

	.text-primary {
		color: #07c160;
	}

	.text-gray-400 {
		color: #999;
	}

	.progress-line {
		flex: 1;
		height: 4rpx;
		background-color: #dcdcdc;
		margin: 0 10rpx;
		position: relative;
	}

	.progress-fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #07c160;
		width: 0;
		transition: width 0.5s ease-in-out;
	}

	/* 步骤容器样式 */
	.step-container {
		transition: all 0.3s ease-in-out;
	}

	.hidden {
		display: none;
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.text-center {
		text-align: center;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}

	.link {
		color: #007aff;
	}

	.shield-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(7, 193, 96, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
		color: #333;
	}

	.subtitle {
		font-size: 26rpx;
		color: #999;
		display: block;
	}

	.desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		display: block;
	}

	/* 微信用户信息样式 */
	.wechat-user {
		margin-bottom: 30rpx;
		padding: 20rpx 0;
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(7, 193, 96, 0.2);
	}

	.space-y-20 {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/* 按钮样式 */
	.wechat-auth-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		border-radius: 45rpx;
		background-color: #07c160 !important;
	}

	.wechat-auth-btn::after {
		border: none !important;
	}

	.action-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		border-radius: 45rpx;
	}

	.code-btn {
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 26rpx;
		background-color: #f5f5f5;
		color: #333;
	}

	/* 输入框样式 */
	.input-item {
		height: 90rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #f9f9f9;
	}

	/* 提示卡片样式 */
	.tips-card {
		background-color: #e8f3ff;
		border: 1px solid #d1e5fe;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 26rpx;
	}

	.tips-title {
		font-weight: 500;
		color: #1677ff;
		display: block;
		margin-bottom: 10rpx;
	}

	.tips-content {
		color: #666;
		font-size: 24rpx;
		line-height: 1.5;
	}

	/* 成功弹窗样式 */
	.success-modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 20rpx;
	}

	.success-icon {
		margin-bottom: 30rpx;
	}

	.success-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
	}

	.success-desc {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.progress-bar-small {
		width: 100%;
		height: 6rpx;
		background-color: #eee;
		border-radius: 3rpx;
		overflow: hidden;
	}

	.progress-fill-small {
		height: 100%;
		background-color: #07c160;
		width: 0%;
		transition: width 0.3s ease;
	}

	/* 辅助样式 */
	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.items-center {
		align-items: center;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.space-x-10 {
		gap: 10rpx;
	}

	.mr-2 {
		margin-right: 10rpx;
	}

	.mr-10 {
		margin-right: 10rpx;
	}

	.mt-1 {
		margin-top: 5rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.text-left {
		text-align: left;
	}

	.text-sm {
		font-size: 26rpx;
	}

	.text-xs {
		font-size: 22rpx;
	}

	.font-medium {
		font-weight: 500;
	}

	.block {
		display: block;
	}
</style>